<template>
  <div id="HrDataList">
    <div class="search">
      <div class="titles">
        <span class="title">HR数据</span>
        <span>{{ currentDate?.startTime }}—{{ currentDate?.endTime }}</span>
      </div>
      <div class="search-r">
        <a-select show-search style="width: 200px" @change="searchKeyWords" v-model:value="keyWords"
          placeholder="请选择年份">
          <a-select-option :value="item.value" v-for="item in yearOption" :key="item.timeLabel" :code="item">{{
            item.timeLabel
            }}</a-select-option>
        </a-select>
        <!--        <a-date-picker v-model:value="keyWords" value-format="YYYY" picker="year" @change="searchKeyWords" />-->
        <div class="tabs">
          <div class="tab-item" @click="tabChange(item.value)" v-for="item in tabsOptions"
            :class="{ 'active': actives === item.value }">{{ item.label }}</div>
        </div>
      </div>
    </div>
    <div class="main-content">
      <div>
        <a-spin :spinning="statusLoading">
          <div class="bottom_table">
            <div class="result-wrap">
              <div class="inner" v-show="resultList.length > 0">
                <span v-for="item in resultList" class="result-item">
                  {{ item.value }}
                  <CloseOutlined @click="remove(item)" />
                </span>
                <span @click="removeAll" class="result-clear">清空条件</span>
              </div>
            </div>
            <template v-if="parameLoading">
              <BasicTable ref="tableRef" rowKey="id" @register="registerTable" :scroll="{ x: xDistance, y: yDistance }"
                size="small">
                <template #headerCell="{ column }">
                  <template v-if="column.tooltip">
                    <a-tooltip placement="left" :title="column.tooltip()">
                      <img src="@/assets/icon/tooltip.svg" />
                    </a-tooltip>
                    {{ column.title }}
                  </template>
                </template>
                <template #bodyCell="{ column, record }">
                  <template v-if="column.key === 'educationType'">
                    <a-button class="graduate" :class="{ 'graduate-other': record.educationType == '1' }">
                      {{ record.graduateTime ? record.graduateTime : record.educationType == '0' ? '应届生' : '往届生' }}
                    </a-button>
                  </template>
                  <template v-if="column.dataIndex === 'recommendsName'">
                    {{ record.recommendsName || '无' }}
                  </template>
                  <template v-if="column.dataIndex === 'examineUser'">
                    {{ record.examineUser?.map(item => item.userName).join('、') || '无' }}
                  </template>
                  <template v-if="column.dataIndex === 'trainingUser'">
                    {{ record.trainingUser?.map(item => item.userName).join('、') || '无' }}
                  </template>
                  <template v-if="column.key === 'name'">
                    <span class="status-name child1" v-if="record.isRecommends === '0'">内</span>
                    <span class="status-name child2" v-if="record.sendCount > 1">{{ record.sendCount }}</span>
                    <span class="status-name child3" v-if="record.isException === '1'">异</span>
                    <span class="user-name" @click="goApplicationDetail(record)">{{ record.name }}</span>
                  </template>
                </template>
                <template
                  #customFilterDropdown="{ setSelectedKeys, selectedKeys, confirm, visible, clearFilters, column }">
                  <div style="padding: 8px;min-width: 270px;" v-if="Object.keys(state).length > 0">
                    <div class="filter-dropdown" v-if="state[column.key]">
                      <div v-if="column.formType === 'input'">
                        <a-input v-model:value="state[column.key].inputValue"
                          :placeholder="state[column.key].placeholder">
                          <template #prefix>
                            <SearchOutlined />
                          </template>
                        </a-input>
                      </div>
                      <div v-else-if="column.formType === 'time'">
                        <div class="flex" style="margin-bottom: 16px;cursor: pointer">
                          <span @click="sortChange(column, 'asc', confirm)"
                            :style="{ color: state[column.key].sort === 'asc' ? '#209EE4' : '' }">
                            <ArrowUpOutlined />正序
                          </span>
                          <span @click="sortChange(column, 'desc', confirm)"
                            :style="{ color: state[column.key].sort === 'desc' ? '#209EE4' : '' }">
                            <ArrowDownOutlined />倒序
                          </span>
                        </div>
                        <a-range-picker date-format="YYYY年M月D日" time-format="HH:mm:ss" format="YYYY年M月D日 HH:mm:ss"
                          value-format="YYYY-MM-DD HH:mm:ss" v-model:value="state[column.key].timeRange"
                          :placeholder="['开始时间', '结束时间']" style="width: 100%"></a-range-picker>
                      </div>
                      <div class="mb-2px" v-else-if="column.formType === 'select'">
                        <div class="reset-top">
                          <a-input :style="{ width: column.otherFormType === 'sort' ? '' : '100%' }"
                            v-if="column.otherFormType === 'search' || column.otherFormType === 'sort'"
                            class="reset-input" ref="searchInput" :placeholder="`搜索 ${column.title}`"
                            :value="state[column.key].searchText" @change="handleInputChange($event, column)">
                            <template #prefix>
                              <SearchOutlined />
                            </template>
                          </a-input>
                          <div class="flex" v-if="column.otherFormType === 'sort'" style="cursor: pointer">
                            <span style="margin-right: 2px" @click="sortChange(column, 'asc', confirm)"
                              :style="{ color: state[column.key].sort === 'asc' ? '#209EE4' : '' }">
                              <ArrowUpOutlined />正序
                            </span>
                            <span @click="sortChange(column, 'desc', confirm)"
                              :style="{ color: state[column.key].sort === 'desc' ? '#209EE4' : '' }">
                              <ArrowDownOutlined />倒序
                            </span>
                          </div>
                        </div>
                        <div>
                          <Checkbox class="mb-8px" v-model:checked="state[column.key].checkAll"
                            :indeterminate="state[column.key].indeterminate" @change="onCheckAllChange(column)">
                            全选
                          </Checkbox>
                          <div v-if="state[column.key].options?.length > 0">
                            <CheckboxGroup class='boxGroup' v-model:value="state[column.key].checkedList"
                              :options="state[column.key].options" @change="onCheckChange(column)" />
                          </div>
                        </div>
                      </div>
                    </div>
                    <div style="display: flex;justify-content: space-between;margin-top: 10px;">
                      <a-button type="text" style="color: #209EE4" size="small" @click="handleReset(column)">
                        清除所选内容
                      </a-button>
                      <a-button type="primary" size="small" @click="handleSearch(selectedKeys, confirm, column)">
                        确定
                      </a-button>
                    </div>
                  </div>
                </template>
              </BasicTable>
            </template>
          </div>
        </a-spin>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
const statusLoading = ref<boolean>(false);
import { comStores } from "@/store/common/comStore";
const store = comStores()
const { userInFor } = store
import { useRoute, useRouter } from "vue-router";
const route = useRoute();
import getSelectApi from "@/api/applay/applicationList/self.ts";
const router = useRouter();
import { Button } from '@/components/Button'
import { h, ref, computed, onMounted } from 'vue';
import { Checkbox, CheckboxGroup, message } from 'ant-design-vue';
import { useTable } from "@/components/Table";
// 导入API
import {
  statisticsHeadList,
  statisticsPreserveList,
  statisticsInterviewerList,
  statisticsTrainerList,
  statisticsExaminerList,
  yearList
} from '@/api/applay/HRData/index'
// 表头 以及下拉框配置化
import {
  otherColumns,
  selectOptions,
  setTabType
} from './components/data.ts';
import { nextTick } from "@vue/runtime-core";
const tableColumns = ref<any>([])
const actives = ref('quDao')
setTabType('quDao')
const tabsOptions = [
  { label: '渠道HR', value: 'quDao' },
  { label: '维护HR', value: 'weiHu' },
  { label: '面试官', value: 'mianShiGuan' },
  { label: '培训官', value: 'peiXunGuan' },
  { label: '考核官', value: 'kaoHeGuan' }
];
const yDistance = computed(() => { //y的滚动距离
  let num = 680;
  const scrollHeight = document.documentElement.scrollHeight;
  const extra = resultList.value.length > 0 ? 30 : 0
  const ratio = (num - extra) / 962
  return scrollHeight * ratio
})

const xDistance = computed(() => {
  const map = {
    quDao: 1000,
    weiHu: 3000,
    mianShiGuan: 3000,
    peiXunGuan: 2500,
    kaoHeGuan: 1000
  }
  return map[actives.value] || 1000
})

const yearOption = ref<any>([])
const currentDate = ref<any>({})
const keyWords = ref<any>(undefined)
const parameLoading = ref<any>(false)
const getYearList = async () => {
  const data = await yearList()
  if (data) {
    yearOption.value = data.timeRangeList
    currentDate.value = data.currentYear
    keyWords.value = data.currentYear.timeLabel
    parameLoading.value = true
    diyRequestData.value = {
      year: data.currentYear.timeLabel,
      beginTime: data.currentYear.startTime,
      endTime: data.currentYear.endTime
    }

    // reload()
  } else {
    message.error(data.msg)
  }
}
getYearList()
/*
* 因为是多页面公用一个文件 所以通过路由配置的方式 去加载不同的表头配置
* */
tableColumns.value = otherColumns['quDao']
// 过滤表格数据
function unique(arr, requestType) {
  const res = new Map();
  let list = arr.filter((a) => !res.has(a.label) && res.set(a.label, 1))
  if (requestType == '2') {
    list = list.filter(el => el.label != '小低' && el.label != '小高')
  }
  return list
}

const selectOptionsList = ref()
selectOptionsList.value = selectOptions

// 初始化获取下拉框数据
const getOptions = async (item: any) => {
  let temp = {}
  if (item.requestApi === 'selectUserByRole') {
    temp = {
      request: item.requestType,
      type: 0
    }
  } else if (item.requestApi === 'selectCommonConfig') {
    temp = {
      type: 1,
      level: item.requestType
    }
  } else if (item.requestApi === 'selectCommonConfigDetail') {
    temp = { type: item.requestType }
  }
  const data = await getSelectApi[item.requestApi](temp);
  const list = data.data.map((el) => {
    return {
      label: el.label || el,
      value: el.value || el,
    };
  });
  return unique(list, item.requestType)
}
selectOptionsList.value = selectOptions
// 遍历下拉框的配置化 并且给下拉框下拉数据进行接口赋值
Object.keys(selectOptionsList.value).forEach(async (key) => {
  if (selectOptionsList.value[key]?.requestApi) {
    selectOptionsList.value[key].option = await getOptions(selectOptionsList.value[key])
  }
})

// 全局状态换成
const state = ref<any>({});
// 设置表头的下拉数据 主要用于v-modal
const setTableHeader = () => {
  for (let i = 0; i < tableColumns.value.length; i++) {
    const item = tableColumns.value[i];
    state.value[item.key] = {}
    state.value[item.key].formType = item.formType
    if (item.formType === 'select') {
        state.value[item.key].options = selectOptionsList.value[item.key] ? selectOptionsList.value[item.key].option : []
        state.value[item.key].cacheOptions = selectOptionsList.value[item.key] ? selectOptionsList.value[item.key].option : []
        if (item?.field) {
          selectOptionsList.value[item.key].field = item.field
      }
    } else if (item.formType === 'input') {
      state.value[item.key].inputValue = ''
    } else if (item.formType === 'time') {
      // state.value[item.key].timeRange = []
      state.value[item.key].timeParams = item.timeParams
    }
    state.value[item.key].placeholder = selectOptionsList.value[item.key] ? selectOptionsList.value[item.key].placeholder : ''
  }
}
setTableHeader()

// 下拉框筛选结果集
const resultList = ref<any>([]);

const allchecked = ref<any>(false); // 全选
const isAllSelected = ref<any>(true); // 控制是否全选
const selectedIndex = ref<any>(-1); // 初始化为-1，表示没有选中任何项
const statusIndex = ref<any>();
// 表格的数据
const tableData = ref<any>([]);
// 定义一个全局请求的参数 最终进行参数组装
const requestPageData = ref<any>(); // 是表格自带的分页请求参数信息
const diyRequestData = ref<any>({}); // 是自定义的请求参数
const getTabulationPage = (parames: any) => {
  // if (parames.order && (parames.order === 'ascend' || parames.order === 'descend')) {
  //   return tableData.value
  // }
  requestPageData.value = parames;
  if (actives.value === 'quDao') {
    return statisticsHeadList(gerRequestParames())
  } else if (actives.value === 'weiHu') {
    return statisticsPreserveList(gerRequestParames())
  } else if (actives.value === 'mianShiGuan') {
    return statisticsInterviewerList(gerRequestParames())
  } else if (actives.value === 'peiXunGuan') {
    return statisticsTrainerList(gerRequestParames())
  } else if (actives.value === 'kaoHeGuan') {
    return statisticsExaminerList(gerRequestParames())
  }
}
// 请求参数
const gerRequestParames = () => {
  const req: any = {
    ...diyRequestData.value, // 自定义请求
    ...getTableHeaderRequest(), // 表头筛选
    ...requestPageData.value, // 基础请求
  }
  return req
}

// 从表头下拉中获取数据
const getTableHeaderRequest = () => {
  const obj = {}
  Object.keys(state.value).forEach((i: any) => {
    if (state.value[i].formType === 'select' && state.value[i].checkedList && state.value[i].checkedList.length > 0) {
      // 如果是下拉框的话
      obj['ids'] = state.value[i].checkedList
    } else if (state.value[i].formType === 'input' && state.value[i].inputValue) {
      // 如果是输入框的话
      obj[i] = state.value[i].inputValue
    } else if (state.value[i].formType === 'time' && state.value[i].timeRange) {
      obj[state.value[i].timeParams[0]] = state.value[i].timeRange[0]
      obj[state.value[i].timeParams[1]] = state.value[i].timeRange[1]
    }
  })
  return obj
}
// Reload状态
const pageReloadStatus = ref(false)
const tableParams = ref<any>({
  title: '',
  api: getTabulationPage,
  columns: tableColumns,
  pagination: {
    pageSize: 15, // 设置每页显示 50 条数据
    // 可以添加更多 pagination 的配置
  },
  clearSelectOnPageChange: true,
  clickToRowSelect: false,
  useSearchForm: false,
  showTableSetting: false,
  showIndexColumn: false,
  bordered: true,
  canResize: true,
  beforeFetch(info) {
  },
  afterFetch(list) {
    // 表格请求完成后的一些处理
    if (getSelectRows().length === 0) {
      // 每次请求重置全选
      allchecked.value = false
    }
    // 缓存一份表格结果
    tableData.value = list
    if (!pageReloadStatus.value) {
      pageReloadStatus.value = true
      // 设置表头信息
      setTableHeader()
    }
    store.getMenuCountList()
  }
})
// 表格请求
const [registerTable, { reload, setPagination, getForm, setColumns, getPaginationRef, getSelectRows, setSelectedRowKeys, clearSelectedRowKeys, updateTableData, getDataSource }] =
  useTable(tableParams.value);

function tabChange(e: any) {
  // 使用V-IF重置表格渲染
  parameLoading.value = false
  // 利用排序回调 清除上次表格排序
  tableParams.value.sortFn = () => { }
  setTabType(e)
  actives.value = e
  tableColumns.value = otherColumns[e];
  reload()
  getYearList()
  removeAll()
  setTableHeader()
  // 当表格渲染成功以后 再次去除表格排序 防止排序不生效
  nextTick(() => {
    delete tableParams.value.sortFn
  })
  // 更新表格数据
  // gerRequestParames()
  // reload(gerRequestParames());
}




const PlainOptions = ref<any>({});
// 选中所有行
function selectAllRows() {
  if (!allchecked.value) {
    const allKeys = tableData.value.map(row => row.id);
    setSelectedRowKeys(allKeys);
  } else {
    clearSelectedRowKeys();
  }
}
// 跳转详情页
function goApplicationDetail(item: any) {
  router.push({ path: '/applicationDetails/cvDetail', query: { id: item?.id } })
}
//所有的数据都从这里走的，点击时获取到对应的参数。放入state里

//通过Columns 获取state的options
function fuzzySearch(column, searchTerm: string = '') {
  // 将搜索词转换为小写，以便进行不区分大小写的比较
  const array = state.value[column.key].cacheOptions
  const lowerSearchTerm = searchTerm.toLowerCase();

  // 使用 filter 方法返回与搜索词匹配的项
  return array.filter(item => {
    // 将 label 转换为小写，并检查是否包含搜索词
    return item.label.toLowerCase().includes(lowerSearchTerm);
  });
}
const getColumns = (column, searchText: string = '') => {
  //获取筛选的数据选项
  // cacheOptions
  const list: any = [];
  tableData.value.forEach((el: any) => {
    if (searchText) {
      if (el[column.key].toUpperCase().includes(searchText.toUpperCase())) {
        list.push({
          label: el[column.key],
          value: el.key,
        });
      }
    } else {
      if (typeof (column) == 'string') {
        list.push({
          label: el[column],
          value: el.key,
        });

      } else {
        list.push({
          label: el[column.key],
          value: el.key,
        });
      }

    }
  });
  return list;
};
// 输入框搜索
const searchKeyWords = (e, option) => {
  // 通过自定义请求参数进行接口请求
  delete diyRequestData.value.year
  delete diyRequestData.value.beginTime
  delete diyRequestData.value.endTime
  currentDate.value = option.code
  if (e) {
    diyRequestData.value = {
      year: e,
      beginTime: option.code.startTime,
      endTime: option.code.endTime,
      ...diyRequestData.value
    }
  }
  reload();
}

//点击确定
const handleSearch = (selectedKeys, confirm, column) => {
  // 表头下拉框确认事件
  confirm();
  // 通过全局缓存表头表单数据进行结果查询 并且展示出已选结果
  getResult(column);
  // 更新表格数据
  gerRequestParames()
  reload(gerRequestParames());
  console.log('刷新完成')
};
//获取筛选
const getResult = (column) => {
  const current = state.value[column.key];
  const checkedList = current.checkedList;
  if (column.formType === 'select') {
    state.value[column.key].requestValueList = checkedList
  } else if (column.formType === 'input') {
    state.value[column.key].requestValue = current.inputValue
  } else if (column.formType === 'timeRange') {
    state.value[column.key].requestValue = current.timeRange
  }
  const options = current.options;
  let result: any = [];
  if (checkedList?.length > 0) {
    options.forEach((el: any) => {
      checkedList.forEach((item) => {
        if (el.value === item) {
          result.push(el.label);
        }
      });
    });
  }
  let isExistedRow = resultList.value.find((el) => el.key == column.key);
  if (checkedList?.length === 0 && isExistedRow) {
    resultList.value = resultList.value.filter((el) => el.key != column.key);
    return;
  }
  const resStr = column.formType === 'select' ? (result.length > 3 ? result?.slice(0, 3).join('、') + ' 等' : result.join('、')) :
    column.formType === 'input' ? current.inputValue : current.timeRange.join('-')
  const finalMap = {
    label: column.title,
    key: column.key,
    value: `${column.title}：${resStr}`,
  };
  if (isExistedRow) {
    isExistedRow.value = finalMap.value;
  } else if (!isExistedRow && resStr) {
    resultList.value.push(finalMap);
  }
};
//输入框改变时
const handleInputChange = (event, column) => {
  let searchText = event.target.value;
  state.value[column.key].options = fuzzySearch(column, searchText);
};
// 多选按钮触发
const onCheckChange = (columns) => {
  if (state.value[columns.key].checkedList.length && (state.value[columns.key].checkedList.length === state.value[columns.key].options.length)) {
    state.value[columns.key].checkAll = true
  } else {
    state.value[columns.key].checkAll = false
  }
}
//全选的时候获取参数
const onCheckAllChange = (column) => {
  state.value[column.key].indeterminate = false;
  if (state.value[column.key].checkAll) {
    const options = state.value[column.key].options;
    state.value[column.key].checkedList = options.map((el) => el.value);
  } else {
    state.value[column.key].checkedList = [];
  }
};
//取消全选的时候
const handleReset = (column) => {
  if (column.formType === 'select') {
    state.value[column.key].checkAll = false;
    state.value[column.key].indeterminate = false;
    state.value[column.key].checkedList = [];
  } else if (column.formType === 'input') {
    state.value[column.key].inputValue = ''
  } else {
    state.value[column.key].timeRange = []
  }
};
//标签页清空所有的参数
const removeAll = () => {
  resultList.value.forEach((item) => {
    state.value[item.key].checkedList = [];
    state.value[item.key].indeterminate = false;
    state.value[item.key].checkAll = false;
    state.value[item.key].indeterminate = false;
    state.value[item.key].checkedList = [];
    state.value[item.key].inputValue = '';
    state.value[item.key].timeRange = [];
    state.value[item.key].requestValueList = [];
    state.value[item.key].requestValue = '';
  });
  resultList.value = [];
  diyRequestData.value = {}
  keyWords.value = currentDate.value.timeLabel
  reload()
  // 更新表格数据
  // reload(gerRequestParames());
};
// 删除已选结果
const remove = (item) => {
  if (state.value[item.key].formType === 'input') {
    state.value[item.key].requestValue = '';
    state.value[item.key].inputValue = '';
  } else if (state.value[item.key].formType === 'time') {
    state.value[item.key].timeRange = [];
  } else {
    state.value[item.key].checkedList = [];
  }
  state.value[item.key].indeterminate = false;
  resultList.value = resultList.value.filter((v) => v.key !== item.key);
  reload()
};




//选中所有的
function toggleSelectAll() {
  if (!isAllSelected.value) {
    // 如果要全选，但因为是单选逻辑，你可能只是想要高亮显示所有项
    selectedIndex.value = -1; // 假设我们“选中”了第一个
    isAllSelected.value = true;
  }
}
//选中某一项
function selectStage(index: number) {
  selectedIndex.value = index;
  isAllSelected.value = false;
}
//选中某一项状态
function statusSelect(item: any) {
  statusIndex.value = item.value;
}
const sortingFields = ref<any>([])
const sortChange = (column, value, confirm) => {
  state.value[column.key].sort = value
  if (sortingFields.value.length > 0) {
    const list = sortingFields.value.filter(item => item.field === column.field)
    if (list.length > 0) {
      if (list[0].order === value) {
        sortingFields.value = sortingFields.value.filter(item => item.field !== column.field)
        state.value[column.key].sort = ''
      } else {
        list[0].order = value
      }
    } else {
      sortingFields.value.push({
        field: column.field,
        order: value,
        key: column.key
      })
    }
  } else {
    sortingFields.value.push({
      field: column.field,
      order: value,
      key: column.key
    })
  }
  diyRequestData.value = {
    sortingFields: sortingFields.value.map(item => {
      return {
        field: item.field,
        order: item.order
      }
    }),
  }
  reload();
}
</script>
<style lang="less" scoped>
:deep(::-webkit-scrollbar) {
  width: 8px;
  /* 滚动条宽度 */
  height: 8px !important;
  /* 滚动条高度 */
}

:deep(::-webkit-scrollbar-thumb:hover) {
  background-color: #dddddd !important;
  /* 鼠标悬停时滚动条拇指颜色 */
}

#HrDataList {
  .search {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;

    .titles {
      color: #333333;

      .title {
        font-size: 20px;
        font-weight: bold;
        margin-right: 12px;
      }

      .update {
        margin-left: 10px;
        color: #209EE4;
        cursor: pointer;

        &:hover {
          text-decoration-line: underline;
        }
      }
    }

    .search-r {
      display: flex;

      .search-input {
        width: 368px;
        height: 32px;
        border-radius: 3px;
        border: 1px solid rgba(179, 192, 200, 0.3);
        color: #B3C0C8;

        ::placeholder {
          color: #B3C0C8;
          font-weight: 400;

        }

        .search-i-i {
          width: 20px;
          height: 20px;
        }
      }

      .tabs {
        padding: 2px;
        background-color: #FFFFFF;
        border-radius: 6px;
        margin-left: 8px;
        display: flex;
        align-items: center;

        .tab-item {
          padding: 4px 10px;
          cursor: pointer;
          margin: 0 5px;
        }

        .tab-item:first-child {
          margin-left: 0;
        }

        .tab-item:last-child {
          margin-right: 0;
        }

        .active {
          color: #209EE4;
          background: #F5F7FB;
          border-radius: 4px 4px 4px 4px;
        }
      }
    }
  }

  .main-content {
    padding: 16px;
    background-color: #FFFFFF;
    border-radius: 10px;

    .filter {
      display: flex;
      flex-wrap: wrap;
      width: 100%;

      .filters-item {
        flex: 0 1 calc((100% - (6 * 17px)) / 7);
        margin-right: 17px;
        margin-bottom: 24px;

        &:nth-of-type(7n) {
          margin-right: 0;
        }
      }
    }
  }
}

:deep(.boxGroup) {
  display: flex;
  flex-direction: column;
}

.bottom_table {
  position: relative;
  background: #ffffff;

  .table_btnC {
    display: flex;
    align-items: baseline;
    position: absolute;
    bottom: -12px;
    left: 0px;
    height: 40px;
  }

  .result-wrap {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 10px;
    align-items: center;
    line-height: 30px;
    //background: #fff;
    border-radius: 4px;

    .result-item {
      flex: 1;
      font-size: 12px;
      margin-right: 15px;
      border: 1px solid #ccc;
      padding: 3px 10px;
      border-radius: 4px;
      box-sizing: border-box;
    }

    .result-clear {
      color: #209ee4;
      cursor: pointer;
      font-size: 14px;
      border: 1px solid;
      padding: 1px 5px;
    }
  }
}

.user-name {
  color: #209EE4;
  cursor: pointer;

  &:hover {
    text-decoration-line: underline;
  }
}

.status-name {
  width: 18px;
  height: 18px;
  border-radius: 3px;
  display: inline-block;
  font-size: 11px;
  text-align: center;
  line-height: 18px;
  margin-right: 5px;

}

.child1 {
  color: #FF4242;
  background: rgba(255, 66, 66, 0.1);
}

.child2 {
  color: #209EE4;
  background: rgba(32, 158, 228, 0.1);
}

.child3 {
  color: #F0A03D;
  background: rgba(240, 160, 61, 0.1);
}

.graduate {
  color: #209EE4;
  border: none;
  background-color: rgba(32, 158, 228, 0.15);
}

.graduate-other {
  color: #F0A03D;
  background-color: rgba(240, 160, 61, 0.15);

  &:hover {
    color: #F0A03D;
  }
}

.interview {
  color: #209EE4;
  background: rgba(32, 158, 228, 0.1);
}

.interview-other {
  color: #16C716;
  background: rgba(22, 199, 22, 0.1);
}

.filter-dropdown {
  padding: 8px;
  min-height: 50px;
  max-height: 300px;
  overflow-x: auto;
  box-sizing: border-box;

  .reset-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;

    .reset-input {
      height: 32px;
      width: 140px;
    }
  }
}

.reset-btn {
  border: 1px solid rgba(179, 192, 200, 0.3) !important
}
</style>